﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Screen Task">
    <meta name="author" content="Eslam Hamouda">
    <title>Screen Task</title>

    <link href="bootstrap.min.css" rel="stylesheet" />
    <style>
        body {
            padding-top: 5px;
        }

        .footer {
            border-top: 1px solid #eee;
            margin-top: 20px;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        /* Main marketing message and sign up button */
        .jumbotron {
            text-align: center;
            background-color: transparent;
        }

            .jumbotron .btn {
                font-size: 21px;
                padding: 14px 24px;
            }

        /* Customize the nav-justified links to be fill the entire space of the .navbar */

        .nav-justified {
            background-color: #eee;
            border-radius: 5px;
            border: 1px solid #ccc;
        }

            .nav-justified > li > a {
                margin-bottom: 0;
                padding-top: 15px;
                padding-bottom: 15px;
                color: #777;
                font-weight: bold;
                text-align: center;
                border-bottom: 1px solid #d5d5d5;
                background-color: #e5e5e5; /* Old browsers */
                background-repeat: repeat-x; /* Repeat the gradient */
                background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%); /* FF3.6+ */
                background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */
                background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Chrome 10+,Safari 5.1+ */
                background-image: -o-linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* Opera 11.10+ */
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
                background-image: linear-gradient(top, #f5f5f5 0%,#e5e5e5 100%); /* W3C */
            }

            .nav-justified > .active > a,
            .nav-justified > .active > a:hover,
            .nav-justified > .active > a:focus {
                background-color: #ddd;
                background-image: none;
                box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
            }

            .nav-justified > li:first-child > a {
                border-radius: 5px 5px 0 0;
            }

            .nav-justified > li:last-child > a {
                border-bottom: 0;
                border-radius: 0 0 5px 5px;
            }

        @media (min-width: 768px) {
            .nav-justified {
                max-height: 52px;
            }

                .nav-justified > li > a {
                    border-left: 1px solid #fff;
                    border-right: 1px solid #d5d5d5;
                }

                .nav-justified > li:first-child > a {
                    border-left: 0;
                    border-radius: 5px 0 0 5px;
                }

                .nav-justified > li:last-child > a {
                    border-radius: 0 5px 5px 0;
                    border-right: 0;
                }
        }

        /* Responsive: Portrait tablets and up */
        @media screen and (min-width: 768px) {
            /* Remove the padding we set earlier */
            .masthead,
            .marketing,
            .footer {
                padding-left: 0;
                padding-right: 0;
            }
        }

    </style>
</head>
<body>


    <div class="container">

        <div class="masthead">
            <h1 class="text-muted">Screen Task</h1>
            <ul class="nav nav-pills nav-fill">
                <li class="nav-item"><a class="nav-link active" href="./">Home</a></li>
                <li class="nav-item"><a class="nav-link" target="_blank" href="https://github.com/EslaMx7/ScreenTask">Project On Github</a></li>
                <li class="nav-item"><a class="nav-link" id="lnkAbout" href="#">About</a></li>
            </ul>
        </div>
        
        <div id="msgAbout" class="alert alert-info alert-dismissable d-none mt-2">
            <div class="d-flex justify-content-between">
                <strong>About!</strong>
                <button id="closeAbout" type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <p>Share Your Desktop With Your Friends Inside The Internal Network [No Internet Connection Required]</p>
            <p> This Application Developed by :</p>
            <ul class="ms-5">
                <li class="ms-5"><a href="https://github.com/EslaMx7" target="_blank">Eslam Hamouda</a></li>
                <li class="ms-5"><a href="https://github.com/ElBedeawi" target="_blank">Wagih ElBedeawi</a></li>
            </ul>
            <p class="text-center">
                <em>Hope This Helps You On Your Work!</em>
                <a href="https://www.buymeacoffee.com/eslamx7" target="_blank"><img src="./buymeacoffee.png"></a>
            </p>
            <p>
                Send Your Feedback to <a href="https://github.com/EslaMx7/ScreenTask/issues/new/choose" style="font-weight: bold;" target="_blank">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-github" viewBox="0 0 16 16">
                        <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
                    </svg> GitHub
                </a>
            </p>
        </div>

        <hr />
        <!-- Preview -->
        <div id="Viewer" class="imgPreview">
            <div id="serverStoppedMessage" class="d-none" style="text-align: center;">
                <h1>ScreenTask</h1>
                <h3>Server Stopped</h3>
                <h3><a href="https://screentask.me" target="_blank">screentask.me</a></h3>
            </div>
            <img id="imgPrev" src="ScreenTask.jpg" class="img-responsive" style="max-width: 100%;" alt="LIVE! Sever Screen Now!" />
            <br />
            <div class="well text-center mt-2">

                <div class="row">

                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <button id="btnStartStop" class="btn btn-danger" data-state="stop">
                            <div id="stop">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stop-circle" viewBox="0 0 16 16">
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                                    <path d="M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3z" />
                                </svg>
                                Stop Watching!
                            </div>

                            <div id="play" class="d-none">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-circle" viewBox="0 0 16 16">
                                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z" />
                                    <path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z" />
                                </svg>
                                Start Watching!
                            </div>
                        </button>
                    </div>

                    <div id="intervalSection" class="col-lg-4 col-md-4 col-sm-4">
                        <div class="input-group input-group-sm">
                            <input id="txtInterval" type="text" class="form-control" placeholder="Interval in Mellisecond" value="500">
                            <div class="input-group-btn">
                                <button id="btnSetTimer" type="button" class="btn btn-outline-secondary">Set Refresh Interval(ms)</button>
                            </div><!-- /btn-group -->
                        </div><!-- /input-group -->
                    </div>

                    <div class="col-lg-4 col-md-4 col-sm-4">
                        <button id="btnFullscreen" class="btn btn-secondary">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrows-fullscreen" viewBox="0 0 16 16">
                                <path fill-rule="evenodd" d="M5.828 10.172a.5.5 0 0 0-.707 0l-4.096 4.096V11.5a.5.5 0 0 0-1 0v3.975a.5.5 0 0 0 .5.5H4.5a.5.5 0 0 0 0-1H1.732l4.096-4.096a.5.5 0 0 0 0-.707zm4.344 0a.5.5 0 0 1 .707 0l4.096 4.096V11.5a.5.5 0 1 1 1 0v3.975a.5.5 0 0 1-.5.5H11.5a.5.5 0 0 1 0-1h2.768l-4.096-4.096a.5.5 0 0 1 0-.707zm0-4.344a.5.5 0 0 0 .707 0l4.096-4.096V4.5a.5.5 0 1 0 1 0V.525a.5.5 0 0 0-.5-.5H11.5a.5.5 0 0 0 0 1h2.768l-4.096 4.096a.5.5 0 0 0 0 .707zm-4.344 0a.5.5 0 0 1-.707 0L1.025 1.732V4.5a.5.5 0 0 1-1 0V.525a.5.5 0 0 1 .5-.5H4.5a.5.5 0 0 1 0 1H1.732l4.096 4.096a.5.5 0 0 1 0 .707z" />
                            </svg>
                            Fullscreen
                        </button>
                    </div>
                </div>
                <div class="row">

                </div>
            </div>

        </div>
        <!-- Site footer -->
        <div class="footer">
            <p>&copy; Screen Task 2014-2022 | <a href="https://screentask.me">ScreenTask</a>.</p>
        </div>

    </div> <!-- /container -->

    <script>
        var refreshInterval = 500;
        var isWatching = true;
        var serverFailCount = 0;
        var ImagePreview = document.getElementById('imgPrev');
        var viewer = document.getElementById('serverStoppedMessage');

        function LoadImage() {
            setTimeout(function () {
                viewer.className = 'd-none';
                ImagePreview.className = 'img-responsive';
                ImagePreview.src = 'ScreenTask.jpg?rand=' + Math.random();
            }, refreshInterval);
        }

        ImagePreview.onload = function () {
            if (isWatching) {
                serverFailCount = 0;
                LoadImage();
            }
        };

        var checkServerStatusInterval;

        ImagePreview.onerror = function (err) {
            console.log(err);
            serverFailCount++;
            if (serverFailCount >= 5) {
                viewer.className = '';
                ImagePreview.className = 'img-responsive d-none';
                checkServerStatusInterval = setInterval(function () {
                    fetch("/ScreenTask.jpg", {
                        "method": "GET",
                    }).then(function (success) {
                        clearInterval(checkServerStatusInterval);
                        LoadImage();
                    });
                }, 3000);
            }
            else
                LoadImage();
        }

        var btn = document.getElementById('btnStartStop');

        btn.onclick = function () {
            if (btn.getAttribute('data-state') == 'stop') {
                btn.setAttribute('data-state', 'start');
                btn.className = 'btn btn-primary';
                btn.querySelector('#stop').className = 'd-none';
                btn.querySelector('#play').className = '';
                isWatching = false;
            } else {
                btn.setAttribute('data-state', 'stop');
                btn.className = 'btn btn-danger';
                btn.querySelector('#stop').className = '';
                btn.querySelector('#play').className = 'd-none';
                isWatching = true;
                ImagePreview.src = 'ScreenTask.jpg?rand=' + Math.random();
                
            }

        };

        var btnSetTimer = document.getElementById('btnSetTimer');


        btnSetTimer.onclick = function () {
            var txtInterval = document.getElementById('txtInterval');
            refreshInterval = txtInterval.value;

        };

        var lnkAbout = document.getElementById('lnkAbout');
        var msgAbout = document.getElementById('msgAbout');
        var closeAbout = document.getElementById('closeAbout');
        lnkAbout.onclick = function () {

            msgAbout.className = "alert alert-info alert-dismissable mt-2";
        };
        closeAbout.onclick = function () {
            msgAbout.className = "alert alert-info alert-dismissable d-none mt-2";
        };

        function requestFullScreen(element) {
            // Supports most browsers and their versions.
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(element);
            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
                var wscript = new ActiveXObject("WScript.Shell");
                if (wscript !== null) {
                    wscript.SendKeys("{F11}");
                }
            }
        }

        var btnFullscreen = document.getElementById('btnFullscreen');
        btnFullscreen.onclick = function () {

            var viewer = document.getElementById('Viewer');
            requestFullScreen(viewer);
        };



    </script>

</body>

</html>